<template>
    <div class="sql" ref="sql">
            <Split v-model="split1" :min="minSplit" max='433' @on-moving="movingHandle" @on-move-end="moveEnd">
                <div slot="left" class="leftSplit"  v-if="split1!==0">
                    <div class="Close" @click="closeClick" >
                        <svg viewBox="0 0 1024 1024">
                            <path d="M730.805378 972.127585 730.805378 972.127585 730.805378 972.127585 730.805378 972.127585zM663.606907 84.945671l67.299779 0 0 87.195921L443.874413 489.922169 730.906685 812.252365l0 85.977163-68.416206 0-375.174752-406.03255L663.606907 84.945671z"></path>
                        </svg>
                    </div>
                    <div class="left_top">
                        <div class="icon">
                            <svg viewBox="0 0 1024 1024" version="1.1" width=30>
                                <path d="M298.337 320.634l-55.116 48.677c-19.402-26.983-39.066-40.39-59.171-40.39-9.789 0-17.726 2.645-23.986 7.849-6.174 5.204-9.347 11.109-9.347 17.726 0 6.525 2.207 12.787 6.702 18.606 6.001 7.849 24.252 24.605 54.587 50.266 28.396 23.723 45.678 38.714 51.677 44.973 15.081 15.254 25.837 29.806 32.099 43.741 6.26 13.933 9.434 29.101 9.434 45.595 0 32.099-11.109 58.641-33.246 79.54-22.223 20.899-51.147 31.396-86.773 31.396-27.868 0-52.116-6.79-72.841-20.46-20.636-13.67-38.359-35.095-53.087-64.375l62.611-37.742c18.783 34.57 40.476 51.852 64.992 51.852 12.787 0 23.547-3.703 32.276-11.2 8.731-7.407 13.052-16.048 13.052-25.837 0-8.907-3.263-17.726-9.877-26.63-6.614-8.907-21.074-22.396-43.387-40.653-42.592-34.745-70.194-61.554-82.627-80.425s-18.606-37.742-18.606-56.527c0-27.158 10.316-50.443 31.042-69.842 20.636-19.402 46.207-29.103 76.545-29.103 19.489 0 38.097 4.499 55.823 13.581 17.542 8.908 36.678 25.398 57.227 49.386v0z"></path>
                                <path d="M684.673 601.499l68.078 88.006h-88.182l-34.57-44.533c-28.57 15.695-60.495 23.455-95.591 23.455-58.729 0-107.585-20.283-146.474-60.758-38.89-40.476-58.288-88.801-58.288-144.798 0-37.389 9.082-71.783 27.158-103.087s42.945-56.174 74.69-74.605c31.657-18.429 65.699-27.69 102.029-27.69 55.555 0 103.174 20.017 143.035 60.141 39.86 40.036 59.79 88.89 59.79 146.563 0 53.088-17.283 98.765-51.677 137.303v0zM638.197 541.357c15.787-23.371 23.633-49.295 23.633-77.691 0-37.036-12.523-68.518-37.567-94.447-25.044-25.837-55.291-38.799-90.827-38.799-36.595 0-67.194 12.61-91.886 37.742-24.692 25.221-37.036 57.143-37.036 96.031 0 43.297 15.518 77.514 46.651 102.646 24.339 19.663 51.94 29.541 82.893 29.541 17.726 0 34.481-3.44 50.087-10.406l-70.018-90.124h88.801l35.275 45.503z"></path>
                                <path d="M779.294 267.37h74.426v320.198h108.554v70.99h-182.981v-391.184z"></path>
                            </svg>
                        </div>
                        <Button size="small" style="margin-left: 10px" @click="analysis">解析</Button>
                        <!-- <div class="icon">
                            <svg viewBox="0 0 1024 1024" version="1.1" width=26>
                                <path d="M938.3 530.8l-0.3-4.2c-0.2-2.9-0.4-5.7-0.7-8.6l-0.6-4.8c-0.3-2.6-0.6-5.2-1-7.8-0.2-1.6-0.5-3.2-0.8-4.9-0.4-2.6-0.9-5.1-1.4-7.7-0.3-1.6-0.6-3.1-1-4.7-0.6-2.6-1.2-5.2-1.8-7.7-0.4-1.5-0.7-2.9-1.1-4.3-0.7-2.7-1.5-5.4-2.3-8.1-0.4-1.2-0.8-2.5-1.1-3.7-0.9-2.9-1.9-5.9-3-8.8-0.3-0.9-0.7-1.9-1-2.8-1.3-3.4-2.6-6.8-4-10.2-0.2-0.4-0.3-0.7-0.4-1.1-28.1-66.3-82.8-118.8-151-143.9-0.4-0.1-0.7-0.3-1.1-0.4-3.4-1.2-6.9-2.4-10.4-3.5-0.8-0.2-1.5-0.5-2.3-0.7l-9.3-2.7-3.3-0.9c-2.8-0.7-5.7-1.4-8.5-2l-4.2-0.9c-2.6-0.5-5.2-1-7.8-1.4-1.6-0.3-3.3-0.6-4.9-0.8-0.4-0.1-0.8-0.1-1.2-0.2-57.1-67.9-142.3-108-231.8-108-145.2 0-268.7 102.7-296.9 242.6C126 457.1 89 523.9 89 595.4 89 711.5 183.5 806 299.6 806h162.2c-0.5-3.2-0.9-6.4-0.9-9.8V567.8l-63.7 63.7c-22.9 22.9-60.1 22.9-83 0s-22.9-60.1 0-83l163.9-163.9c22.9-22.9 60.1-22.9 83 0L725 548.5c22.9 22.9 22.9 60.1 0 83-11.5 11.5-26.5 17.2-41.5 17.2s-30-5.7-41.5-17.2l-63.7-63.7v228.4c0 3.3-0.3 6.6-0.9 9.8h99c144.6 0 262.2-117.6 262.2-262.2 0.1-4.4 0-8.7-0.3-13z"></path>
                            </svg>
                        </div> -->
                    </div>
                    <div class="left_bottom" >
                        <MonacoEdit :codes="codes" ref="monaco_edit" :key="key"/>
                    </div>
                </div>
                <div slot="right" class="rightSplit">
                    <Tabs type="card" @on-click="changeGraph" :value="tabsVal">
                        <TabPane label="血缘关系" name = 'antVG6'>
                            <antvG6 ref="antvG6" :sqlFlowData='sqlFlowData'/>
                        </TabPane>
                        <TabPane label="ER图展示" name = "erGraph">
                            <antvG6 ref="erGraph" :sqlFlowData="sqlFlowConData"/>
                        </TabPane>
                    </Tabs>
                </div>
            </Split>
    </div>
</template>
<script>
import antvG6 from '@/components/antvG6'
import MonacoEdit from '../components/MonacoEdit.vue'
export default {
    components: {
        antvG6,
        MonacoEdit
    },
    data(){
        return{
            tabsVal:'antVG6',
            nodes: [
        {
          id: 'node1', // String，该节点存在则必须，节点的唯一标识
          label: 'SDATA.A_SALES',
          type: 'bloodNode',
          field: [
            {
              key: 'id',  //和线里面的sourceKey对应(key为唯一标识)
              type: 'number(6)'
            },
            {
              key: 'name',   
              type: 'VARCHAR(10)'
            }
          ]
        },
        {
          id: 'node2', // String，该节点存在则必须，节点的唯一标识
          label: 'DATA.A_SALESHISIDSDLSDSDWEOWESDHOSDSDLSDSNSNSLFJSLFJ',
          type: 'bloodNode',
          field: [
            {
              key: 'key',
              type: 'varchar(255)'
            },
            {
              key: 'gender',
              type: 'enum(M, F)'
            },
            {
              key: 'birthday',
              type: 'date'
            },
            {
              key: 'hometown',
              type: 'varchar(255)'
            }
          ]
        },
        {
          id: 'node3', // String，该节点存在则必须，节点的唯一标识
          label: 'cdata.A_DFG',
          type: 'bloodNode',
          field: [
            {
              key: 'date',  //和线里面的sourceKey对应(key为唯一标识)
              type: 'number(6)'
            },
            {
              key: 'age',   
              type: 'VARCHAR(10)'
            }
          ]
        },
        {
          id: 'node4', // String，该节点存在则必须，节点的唯一标识
          label: 'cdata.A_DFG1',
          type: 'bloodNode',
          field: [
            {
              key: 'date1',  //和线里面的sourceKey对应(key为唯一标识)
              type: 'number(6)'
            },
            {
              key: 'age1',   
              type: 'VARCHAR(10)'
            }
          ]
        },
      ],
      edges: [
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2',  // String，必须，目标点 id
          sourceKey: 'name',
          targetKey: 'hometown',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2',  // String，必须，目标点 id
          sourceKey: 'id',
          targetKey: 'birthday',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node3',  // String，必须，目标点 id
          sourceKey: 'id',
          targetKey: 'date',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node3', // String，必须，起始点 id
          target: 'node4',  // String，必须，目标点 id
          sourceKey: 'date',
          targetKey: 'date1',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        // {
        //   source: 'node2', // String，必须，起始点 id
        //   target: 'node3',  // String，必须，目标点 id
        //   sourceKey: 'hometown',
        //   targetKey: 'age',
        //   type: 'bloodEdge'
        //   // type: 'erEdge'
        // },
      ],
            sqlFlowConData:{},
            sqlFlowData:{},
            split1: 0,
            minSplit:'620',
            codes:"",
            key:0
        }
    },
    // watch:{
    //     split1:{
    //         handler(val){
    //             if(val){
    //                 this.$nextTick(()=>{
    //                     console.log(val)
    //                         if(this.$refs.monaco_edit){
    //                             // console.log(this.$refs.monaco_edit.monacoEditor.layout)
    //                             this.$refs.monaco_edit.monacoEditor.layout()
    //                             // this.key++
    //                         }
    //                 })
    //             }
    //         },
    //         immediate:true
    //     }
    // },
    methods:{
        graphChange(item){
            if(this.$refs.antvG6.graph||this.$refs.erGraph.graph){
                if(this.tabsVal=='antVG6'){
                    const {graph} = this.$refs.antvG6.graph
                    if(item=='fullScreen'){
                        graph.changeSize(this.$refs.sql.clientWidth,this.$refs.antvG6.$refs.mountNode.clientHeight) 
                        graph.fitCenter();
                    }else{
                        setTimeout(() => {
                            graph.changeSize(this.$refs.antvG6.$refs.mountNode.clientWidth,this.$refs.antvG6.$refs.mountNode.clientHeight) 
                            graph.fitCenter();
                        }, 200);
                    }
                    
                }else{
                    const {graph} = this.$refs.erGraph.graph
                    if(item=='fullScreen'){
                        graph.changeSize(this.$refs.sql.clientWidth,this.$refs.erGraph.$refs.mountNode.clientHeight) 
                        graph.fitCenter();
                    }else{
                         setTimeout(() => {
                            graph.changeSize(this.$refs.erGraph.$refs.mountNode.clientWidth,this.$refs.antvG6.$refs.mountNode.clientHeight) 
                            graph.fitCenter();
                        }, 200);
                    }
                }
            }
            
            
        },
        antVG6Getdata(){
            this.Api.getSQLData({SQLContext:this.$refs.monaco_edit.monacoEditorValue}).then(res=>{
                    if(res.errcode == 0){
                        this.sqlFlowData = res.data
                        // this.sqlFlowData.nodes[0].field.forEach(fie=>{
                        //     const edge = {
                        //     source: this.sqlFlowData.nodes[0].id,
                        //     sourceKey: fie.key,
                        //     target: this.sqlFlowData.nodes[0].id,
                        //     targetKey: fie.key,
                        //     type: "bloodEdge"
                        // }
                        // this.sqlFlowData.edges.push(edge)
                        // })
                        
                        this.sqlFlowData.nodes.forEach(item=>{
                            item.type = 'bloodNode'
                            item.field.forEach(fie=>{
                                fie.key = item.label+'/'+fie.key
                            })
                        })
                        this.sqlFlowData.edges.forEach(edge=>{
                            edge.type = 'bloodEdge'
                            // if(edge.source == edge.target&&edge.targetKey == edge.sourceKey){
                            //     edge.type = 'selfEdge'
                            // }
                            edge.sourceKey = this.sqlFlowData.nodes[this.sqlFlowData.nodes.findIndex(i=>i.id == edge.source)].label + '/'+ edge.sourceKey
                            edge.targetKey = this.sqlFlowData.nodes[this.sqlFlowData.nodes.findIndex(i=>i.id == edge.target)].label + '/'+ edge.targetKey
                        })
                        if(this.sqlFlowData.edges.length==0&&this.sqlFlowData.nodes.length==0){
                            this.$store.state.sqlValue = ''
                            this.$store.state.sqlFlowData = ''
                            this.$refs.antvG6.graph && this.$refs.antvG6.destroyGraph()
                        }else{
                            this.$store.state.sqlValue = this.$refs.monaco_edit.monacoEditorValue
                            this.$store.state.sqlFlowData = this.sqlFlowData
                            // localStorage.setItem('monacoEditorValue',JSON.stringify(this.$refs.monaco_edit.monacoEditorValue))
                            // localStorage.setItem('sqlFlowData',JSON.stringify(this.sqlFlowData))
                            this.$nextTick(()=>{
                                this.$refs.antvG6.graph && this.$refs.antvG6.destroyGraph()
                                this.$refs.antvG6.initGraph(this.$refs.antvG6.$refs.mountNode)
                            })
                        } 
                }
            })
        },
        erGraphGetdata(){
            this.Api.getSQLConditionData({SQLContext:this.$refs.monaco_edit.monacoEditorValue}).then(res=>{
                if(res.errcode == 0){
                    console.log(res.data)
                    this.sqlFlowConData = res.data
                    // this.sqlFlowConData.nodes[0].field.forEach(fie=>{
                    //         const edge = {
                    //         source: this.sqlFlowConData.nodes[0].id,
                    //         sourceKey: fie.key,
                    //         target: this.sqlFlowConData.nodes[0].id,
                    //         targetKey: fie.key,
                    //         type: "erEdge"
                    //     }
                    //     this.sqlFlowConData.edges.push(edge)
                    //     })
                    this.sqlFlowConData.edges.forEach(edge=>{
                        edge.type = 'erEdge'
                        edge.sourceKey = this.sqlFlowConData.nodes[this.sqlFlowConData.nodes.findIndex(i=>i.id == edge.source)].label + '/'+ edge.sourceKey
                        edge.targetKey = this.sqlFlowConData.nodes[this.sqlFlowConData.nodes.findIndex(i=>i.id == edge.target)].label + '/'+ edge.targetKey
                        
                    })
                    this.sqlFlowConData.nodes.forEach(item=>{
                        item.type = 'bloodNode'
                        item.field.forEach(fie=>{
                            fie.key = item.label+'/'+fie.key
                        })
                    })
                    if(this.sqlFlowConData.edges.length==0&&this.sqlFlowConData.nodes.length==0){
                        this.$store.state.sqlValue = ''
                        this.$store.state.sqlFlowConData = ''
                        this.$refs.erGraph.graph && this.$refs.erGraph.destroyGraph()
                    }else{
                         this.$store.state.sqlValue = this.$refs.monaco_edit.monacoEditorValue
                        this.$store.state.sqlFlowConData = this.sqlFlowConData
                        // localStorage.setItem('monacoEditorValue',JSON.stringify(this.$refs.monaco_edit.monacoEditorValue))
                        // localStorage.setItem('sqlFlowConData',JSON.stringify(this.sqlFlowConData))
                        this.$nextTick(()=>{
                            this.$refs.erGraph.graph && this.$refs.erGraph.destroyGraph()
                            this.$refs.erGraph.initGraph(this.$refs.erGraph.$refs.mountNode)
                        })
                    } 
                }
            })
        },
        analysis(){
            if(this.tabsVal == 'antVG6'){
               this.antVG6Getdata()
            }else{
                this.erGraphGetdata()
            }
        },
        closeClick(){
            this.split1 = 0
            this.minSplit = '0'
            document.querySelector('.ivu-split-trigger').style.display = 'none'
            this.codes = this.$refs.monaco_edit.monacoEditorValue
            this.$emit('closeLeft')
            this.graphChange('fullScreen')
        },
        movingHandle(e){
            this.codes = this.$refs.monaco_edit.monacoEditorValue
            this.$refs.monaco_edit.monacoEditor.layout()
        },
        moveEnd () {
            this.codes = this.$refs.monaco_edit.monacoEditorValue
            // this.graphChange()
            this.$refs.monaco_edit.monacoEditor.layout()
            // this.$refs.antvG6.graph && this.$refs.antvG6.destroyGraph()
            // this.$refs.antvG6.initGraph(this.$refs.antvG6.$refs.mountNode)
        },
        changeGraph (name) {
            this.tabsVal = name
            if (name === 'erGraph') {
                console.log(this.$store.state.sqlFlowConData)
                // if(JSON.parse(localStorage.getItem('sqlFlowConData'))!==null){
                if(this.$store.state.sqlFlowConData!==''){
                //    this.sqlFlowConData = JSON.parse(localStorage.getItem('sqlFlowConData'))
                   this.sqlFlowConData = this.$store.state.sqlFlowConData
                   this.$nextTick(()=>{
                        this.$refs.erGraph.graph && this.$refs.erGraph.destroyGraph()
                        this.$refs.erGraph.initGraph(this.$refs.erGraph.$refs.mountNode)
                   })
                  
                }else{
                   this.erGraphGetdata() 
                }
                
            }
            else{
                console.log(JSON.parse(localStorage.getItem('sqlFlowData')))
                if(this.$store.state.sqlFlowData!==''){
                    this.sqlFlowData = this.$store.state.sqlFlowData
                    this.$nextTick(()=>{
                        this.$refs.antvG6.graph && this.$refs.antvG6.destroyGraph()
                        this.$refs.antvG6.initGraph(this.$refs.antvG6.$refs.mountNode)
                    })
                }else{
                    this.antVG6Getdata()
                }
            }
        }
    },
    mounted(){
        this.split1 = 0.45
        // console.log(localStorage.getItem('monacoEditorValue'))
        console.log(this.$store.state.sqlValue)
        if(this.$store.state.sqlValue!==''){
            this.codes = this.$store.state.sqlValue
            if(this.$store.state.sqlFlowData!==''){
                this.sqlFlowData = this.$store.state.sqlFlowData
                this.$nextTick(()=>{
                    this.$refs.antvG6.graph && this.$refs.antvG6.destroyGraph()
                    this.$refs.antvG6.initGraph(this.$refs.antvG6.$refs.mountNode)
                })
            }else{
                this.antVG6Getdata()
            }
        }
        
        // window.onresize = () => {
        //     this.graphChange()
        // }
    },
    beforeDestroy(){
        localStorage.clear()
    }
}
</script>
<style scoped lang="less">
    .sql{
        background: #f8f8f8;
        width: 100%;
        height: 100%;
        .leftSplit{
            width: 100%;
            position: relative;
            // padding: 0 5px 0 20px;
            height: 100%;
            .left_top{
                height: 30px;
                display: flex;
                align-items: center;
                margin-top: 10px;
                margin-bottom: 10px;
                .icon{
                    cursor: pointer;
                    margin-left: 30px;
                    padding: 0 8px;
                    display: flex;
                    align-items: center;
                    svg{
                        fill: #5b5b5b;
                        position: relative;
                        top: 2px;
                    }
                }
            }
            .left_bottom{
                height: calc(100% - 50px);
                width: 100%;
                border: 1px solid #e7e5e5;
                border-right: none;
            }
            .Close{
                width: 17px;
                height: 17px;
                position: absolute;
                right: 6px;
                // top: 14px;
                svg{
                    fill:grey;
                    &:hover{
                        fill:#000
                    }
                }
            }
        }
        .rightSplit {
            padding-top: 10px;
            height: 100%;
            /deep/.ivu-tabs {
                height: 100%;
                .ivu-tabs-bar {
                    margin-bottom: 0px;
                    .ivu-tabs-tab {
                        border: 1px solid #dcdee2;
                        margin-left: 20px;
                        border-radius: 0;
                        &:hover {
                            color: #515a6e;
                            background-color: #eee;
                        }
                    }
                    .ivu-tabs-tab-active {
                        background-color: #eee !important;
                        color: #515a6e;
                        border-top: 1px solid #c1c1c1;
                        border-color: #919191 #c1c1c1 transparent !important;
                        border-style: solid;
                        border-width: 2px 1px 1px;
                        box-shadow: inset 0 1px 0 #ccc;
                    }
                    .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
                        // border-color: #dcdee2 !important;
                    }
                }
                .ivu-tabs-content-animated {
                    height: calc(100% );
                }
            }
        }
        
       /deep/ .ivu-split-trigger-bar-con.vertical {
            display: none ;
            width: 3px !important;
        }
        /deep/ .ivu-split-trigger-vertical {
                width: 3px !important;
            }
       /deep/ .ivu-split-trigger {
            border-left: none !important;
            border-right: 2px solid #dcdee2;
            &:hover{
                border-right: 5px solid #dcdee2;
            }
        }
    }
</style>